<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <!-- 正常写法，逻辑长，模板过重难以维护 -->
        {{myname.substring(0, 1).toUpperCase()+myname.substring(1)}}

        <!-- 计算属性 -->
        <!-- {{mycomputedname}} -->

        <h2>
            计算属性
            <!-- 代码执行第一遍后会将return的结果进行缓存在没存中，当再次调用时直接从内存中调用 -->
        </h2>
        <div> {{ mycomputedname }}</div>
        <div> {{ mycomputedname }}</div>
        <div> {{ mycomputedname }}</div>

        <h2>
            方法
            <!-- 方法无缓存，每次执行都需要重新执行代码逻辑 -->
        </h2>
        <div> {{ mycomputedname() }}</div>
        <div> {{ mycomputedname() }}</div>
        <div> {{ mycomputedname()  }}</div>

        <h2>计算属性可以被赋值</h2>


    </div>

    <script type="text/javascript">
        var vm = new Vue ({
            el:"#box",
            data: {
                myname: "zhangsan",
            },
            methods:{
                mycomputedname(){
                    console.log("mycomputedname")
                    return this.myname.substring(0, 1).toUpperCase()+ this.myname.
                    substring(1)
                }
            },
            computed:{  //简写形式
                mycomputedname(){
                    /* 将逻辑放入computed中，在computed内进行计算，并将计算结果return的值
                    作为mycomputedname的值返回到页面中。
                        计算属性会基于依赖的改变，重新执行
                    */
                   console.log("mycomputedname")
                    return  this.myname.substring(0, 1).toUpperCase()+ this.myname.
                    substring(1)

                },
                mytext:{
                    get(){
                        return "1111111" + this.myname
                    },
                    set(data) {
                        console.log("计算属性被赋值",data)
                        this.myname = data
                    }
                }
            }
        })
    </script>
</body>
</html>